<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            height: 1000px;
            font-size: 80px;
            text-align: center;
            line-height: 1000px;
            color: red;
            position: relative;
        }
        #l0{
            background: darkkhaki;
            color: salmon;
        }
        #l1{
            background: cornflowerblue;
        }
        #l2{
            background: darkgreen;
        }
        #l3{
            background: aquamarine;
        }
        #l4{
            background: sandybrown;
        }
        #l5{
            background: slateblue;
        }
        aside{
            position: fixed;
            right: 20px;
            top: 25%;
            width: 80px;
            height: 400px;
            background: pink;
            flex-direction: column;
            display: none;
        }
        aside p {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* aside p:hover{
            background: yellow;
        } */
    </style>
</head>
<body>
    <div id="l0">大堂</div>
    <div id="l1">1L</div>
    <div id="l2">2L</div>
    <div id="l3">3L</div>
    <div id="l4">4L</div>
    <div id="l5">5L</div>
    <aside>
        <p>1L</p>
        <p>2L</p>
        <p>3L</p>
        <p>4L</p>
        <p>5L</p>
        <p>回到顶部</p>
    </aside>
    <script>
        let div = document.querySelectorAll("div")
        let aside = document.querySelector("aside")
        let ps = document.querySelectorAll("p")

        document.onscroll = function(){
            let = scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            if(scrollTop >= div[0].clientHeight){
                aside.style.display = "flex"
            }else{
                aside.style.display = "none"
            }
            for(let j = 0;j < ps.length;j++){
                    ps[j].style.background = "pink"
                }
            if(scrollTop < div[2].offsetTop){
                ps[0].style.background = "gold"
            }else if(scrollTop < div[3].offsetTop){
                ps[1].style.background = "gold"
            }else if(scrollTop < div[4].offsetTop){
                ps[2].style.background = "gold"
            }else if(scrollTop < div[5].offsetTop){
                ps[3].style.background = "gold"
            }else{
                ps[4].style.background = "gold"
            }

        }
        for(let i = 0;i < div.length; i++){
            ps[i].onclick = function(){
                for(let j = 0;j < ps.length;j++){
                    ps[j].style.background = "pink"
                }
                ps[i].style.background = "gold"
                document.documentElement.scrollTop = div[i + 1].offsetTop
                document.body.scrollTop = div[i + 1].offsetTop
            }
            
        }
        ps[5].onclick = function(){
            document.documentElement.scrollTop = 0
            document.body.scrollTop = 0
        }
    </script>
</body>
</html>